<template>
	<view>
		<view class="main">
			<view class="block form">
				<picker mode="selector" :range="provinceList" range-key="name" @change="provinceChange">
					<view class="form-item">
						<view class="item-title">目的地</view>
						<view class="item-input">
							<text class="inp-class" v-if="provinceSelectedIndex === false">请选择</text>
							<text class="txt" v-else>{{provinceList[provinceSelectedIndex].name || ''}}</text>
							<image src="/static/images/right1.png" mode="widthFix" class="img"></image>
						</view>
					</view>
				</picker>
				
				<picker mode="selector" :range="deliveryList" range-key="name" @change="deliveryChange">
					<view class="form-item">
						<view class="item-title">仓库地址</view>
						<view class="item-input">
							<text class="inp-class" v-if="deliverySelectedIndex === false">请选择</text>
							<text class="txt" v-else>{{deliveryList[deliverySelectedIndex].name || ''}}</text>
							<image src="/static/images/right1.png" mode="widthFix" class="img"></image>
						</view>
					</view>
				</picker>
				
				<picker mode="selector" :range="transList" range-key="name" @change="transChange">
					<view class="form-item">
						<view class="item-title">运输方式</view>
						<view class="item-input">
							<text class="inp-class" v-if="transSelectedIndex === false">请选择</text>
							<text class="txt" v-else>{{transList[transSelectedIndex].name || ''}}</text>
							<image src="/static/images/right1.png" mode="widthFix" class="img"></image>
						</view>
					</view>
				</picker>
				
				<picker mode="selector" @click="channelSelectTap" :disabled="channelSelectDisabled" :range="channelList" range-key="name" @change="channelChange">
					<view class="form-item">
						<view class="item-title">渠道</view>
						<view class="item-input">
							<text class="inp-class" v-if="channelSelectedIndex === false">请选择</text>
							<text class="txt" v-else>{{channelList[channelSelectedIndex].name || ''}}</text>
							<image src="/static/images/right1.png" mode="widthFix" class="img"></image>
						</view>
					</view>
				</picker>
				
				<picker mode="selector" @click="goodsTypeSelectTap" :disabled="isChooseWarehouseAddress ||  goodsTypeSelectDisabled || isChooseChannel" :range="goodsTypeList" range-key="name" @change="goodsTypeChange">
					<view class="form-item">
						<view class="item-title">货物类型</view>
						<view class="item-input">
							<text class="inp-class" v-if="goodsTypeSelectedIndex === false">请选择</text>
							<text class="txt" v-else>{{goodsTypeList[goodsTypeSelectedIndex].name || ''}}</text>
							<image src="/static/images/right1.png" mode="widthFix" class="img"></image>
						</view>
					</view>
				</picker>

				<view class="form-item">
					<view class="item-title">重量</view>
					<view class="item-input">
						<input type="text" v-model="formData.weight" class="inp" placeholder="请输入（kg）" placeholder-class="inp-class">
						<image src="/static/images/right1.png" mode="widthFix" class="img"></image>
					</view>
				</view>
			</view>
			
			<view class="block form">
				<view class="form-item column">
					<view class="item-title">尺寸</view>
					<view class="item-input size">
						<view class="size-item long">
							<text class="title">长</text>
							<input type="number" class="inp" v-model="formData.len">
							<text class="unit">cm</text>
						</view>
						<view class="size-item wide">
							<text class="title">宽</text>
							<input type="number" class="inp" v-model="formData.wide">
							<text class="unit">cm</text>
						</view>
						<view class="size-item high">
							<text class="title">高</text>
							<input type="number" class="inp" v-model="formData.high">
							<text class="unit">cm</text>
						</view>
					</view>
				</view>
			</view>
		</view>
		
		<view class="submit-btn" @click="submitConfirm">估算运费</view>
		
		<u-popup :show="estimateShow" mode="center" bgColor="transparent" @close="estimateClose">
			<view class="estimate-popup">
				<view class="title">预估运费</view>
				<view class="result">
					<view class="result-item">
						<view class="price">
							<text class="price-icon"></text>
							<text class="txt">{{estimateRes.dispatch_fee || 0}}</text>
						</view>
						<view class="txt">人民币</view>
					</view>
					
					<view class="result-item">
						<view class="price">
							<!-- <text class="price-icon">NT</text> -->
							<text class="txt">{{estimateRes.dispatch_fee_tai || 0}}</text>
						</view>
						<view class="txt">{{channelList.length?channelList[0].CurrencynameHl:''}}</view>
					</view>
				</view>
				<view class="operation-list">
					<view class="btn again-btn" @click="estimateClose">重新估算</view>
					<view class="btn complete-btn" @click="estimateClose">确定</view>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import {getBaseList, getChannelList, getGoodsTypeList, getFaceList2} from '@/api/index.js';
	import {freightEstimate} from '@/api/user.js';
	import {
		transportationTypeList,//运输方式
		channelTypeList,//渠道方式
	} from '@/api/order.js';
	export default {
		data() {
			return {
				estimateShow: false,
				estimateRes: {},
				formData: {
					delivery_site: '',
					area_id: '',
					trans_type: '',
					channel: '',
					good_type: '',
					weight: '',
					len: '',
					wide: '',
					high: ''
				},
				deliveryList: [],
				deliverySelectedIndex: false,
				provinceList: [],
				provinceSelectedIndex: false,
				transList: [],
				transSelectedIndex: false,
				channelList: [],
				channelSelectedIndex: false,
				goodsTypeList: [],
				goodsTypeSelectedIndex: false,
				CurrencyType:'',//货币类型
			};
		},
		computed: {
			channelSelectDisabled() {
				return this.deliverySelectedIndex === false || this.transSelectedIndex === false;
			},
			goodsTypeSelectDisabled() { //是否选择了目的地
				return this.provinceSelectedIndex === false;
			},
			isChooseWarehouseAddress(){ //是否未选择仓库地址
				return this.deliverySelectedIndex === false;
			},
			isChooseChannel(){//是否未选择渠道
				return this.channelSelectedIndex === false
			}
		},
		async onLoad() {
			await this.loadData();
			await this.getTransportationType()//运输方式
		},
		methods: {
			async getTransportationType() {
				try{
					let res = await transportationTypeList();
					if(res.status === 200){
						this.transList = res.data
					}
				}catch(e){}
			},

			channelSelectTap() {
				if (this.channelSelectDisabled) {
					uni.showToast({
						title: '请先选择仓库地址和运输方式',
						icon: 'none'
					});
				}
			},
			goodsTypeSelectTap() {
				if (this.goodsTypeSelectDisabled) {
					uni.showToast({
						title: '请先选择目的地',
						icon: 'none'
					});
				}else if(this.isChooseWarehouseAddress){
					uni.showToast({
						title: ' 请先选择仓库地址',
						icon: 'none'
					});
				}else if(this.isChooseChannel){
					uni.showToast({
						title: '请先选择渠道',
						icon: 'none'
					});
				}
			},
			async submitConfirm() {
				try {
					if (this.provinceSelectedIndex === false) {
						throw new Error('请选择目的地');
					}
					if (this.deliverySelectedIndex === false) {
						throw new Error('请选择仓库地址');
					}
					if (this.transSelectedIndex === false) {
						throw new Error('请选择运输方式');
					}
					if (this.channelSelectedIndex === false) {
						throw new Error('请选择渠道');
					}
					if (this.goodsTypeSelectedIndex === false) {
						throw new Error('请选择货物类型');
					}
					let formData = this.formData;
					if (!formData.weight) {
						throw new Error('请输入重量');
					}
					if (!formData.len || !formData.wide || !formData.high) {
						throw new Error('请输入尺寸');
					}
					formData.delivery_site = this.deliveryList[this.deliverySelectedIndex].delivery_site_id;
					formData.area_id = this.provinceList[this.provinceSelectedIndex].id;
					formData.trans_type = this.transList[this.transSelectedIndex].id;
					formData.channel = this.channelList[this.channelSelectedIndex].channel_id;
					formData.good_type = this.goodsTypeList[this.goodsTypeSelectedIndex].id;
					let res = await freightEstimate(formData);
					this.estimateRes = res.data;
					this.estimateOpen();
				} catch (error) {
					console.log(error);
					uni.showToast({
						title: error.message,
						icon: 'none'
					});
				}
			},
			async transChange(e) {
				this.transSelectedIndex = e.detail.value;
				this.channelSelectedIndex = false;
				await this.loadChannelList();
			},
			channelChange(e) {
				this.channelSelectedIndex = e.detail.value;
				this.loadGoodsTypeList();
			},
			goodsTypeChange(e) {
				this.goodsTypeSelectedIndex = e.detail.value;
			},
			async deliveryChange(e) {
				this.deliverySelectedIndex = e.detail.value;
				this.channelSelectedIndex = false;
				this.goodsTypeSelectedIndex = false;
				await this.loadChannelList();
				await this.loadGoodsTypeList();
			},
			provinceChange(e) {
				this.provinceSelectedIndex = e.detail.value;
			},
			async loadChannelList() {
				try {
					if (this.channelSelectDisabled) {
						return;
					}
					let res = await channelTypeList({
						delivery_site_id: this.deliveryList[this.deliverySelectedIndex]?.delivery_site_id || 0,
						type: this.transList[this.transSelectedIndex]?.id || 0
					});
					this.channelList = res.data || [];
				} catch (error) {
					
				}
			},
			async loadGoodsTypeList() {
				try {
					if (this.goodsTypeSelectDisabled || this.isChooseWarehouseAddress || this.isChooseChannel) {
						return;
					}
					let params = {
						delivery_site_id:this.deliveryList[this.deliverySelectedIndex]?.delivery_site_id || 0,
						channel_id:this.channelList[this.channelSelectedIndex].channel_id
					}
					let res = await getGoodsTypeList(params);
					this.goodsTypeList = res.goods_type || [];
				} catch (error) {
					
				}
			},
			async loadData() {
				await this.loadFaceList();
				await this.loadBaseList();
			},
			async loadFaceList() {
				try {
					let res = await getFaceList2();
					this.deliveryList = res.data?.warehouse || [];
				} catch (error) {
					
				}
			},
			async loadBaseList() {
				try {
					let res = await getBaseList();
					this.provinceList = res.data?.province || [];
					// this.transList = res.data?.trans_type || [];
				} catch (error) {
					
				}
			},
			estimateOpen() {
				this.estimateShow = true;
			},
			estimateClose() {
				this.estimateShow = false;
			}
		}
	}
</script>

<style lang="scss">
	.main {
		padding: 50rpx 30rpx 200rpx 30rpx;
		width: 100%;
		box-sizing: border-box;
		
		.block {
			width: 100%;
			margin-bottom: 20rpx;
			background-color: #fff;
			border-radius: 20rpx;
			box-shadow: 2rpx 2rpx 28rpx 0 rgba(0,0,0,0.06);
			padding: 0 30rpx;
			box-sizing: border-box;
		}
		
		.block:last-of-type {
			margin-bottom: none;
		}
		
		.form {
			width: 100%;
			
			.form-item {
				display: flex;
				align-items: center;
				justify-content: center;
				padding: 30rpx 0;
				box-sizing: border-box;
				border-bottom: 2rpx solid rgba(#000, .04);
				
				.item-title {
					font-size: 28rpx;
					font-weight: 500;
					color: #666;
				}
				
				.item-input {
					flex: 1;
					padding-left: 30rpx;
					box-sizing: border-box;
					display: flex;
					align-items: center;
					justify-content: flex-end;
					
					.inp,
					.txt,
					.inp-class {
						font-size: 28rpx;
						font-weight: 500;
						color: #999;
						text-align: right;
					}
					
					.inp,
					.txt {
						flex: 1;
						color: #333;
						font-weight: bold;
					}
					
					.img {
						width: 12rpx;
						height: 17rpx;
						margin-left: 15rpx;
					}
				}
				
				.size {
					padding-bottom: 20rpx;
					display: flex;
					align-items: center;
					justify-content: space-between;
					
					.size-item {
						width: 200rpx;
						height: 80rpx;
						display: flex;
						align-items: flex-end;
						justify-content: space-between;
						background-color: #f5f5f5;
						border-radius: 12rpx;
						padding: 0 20rpx 20rpx 20rpx;
						box-sizing: border-box;
						
						.title,
						.unit {
							font-size: 28rpx;
							color: #666;
							font-weight: 500;
						}
						
						.inp {
							flex: 1;
							padding: 0 10rpx;
							box-sizing: border-box;
							text-align: right;
							font-size: 30rpx;
							color: #333;
							font-weight: bold;
						}
					}
				}
			}
			
			.form-item.column {
				flex-direction: column;
				
				.item-title {
					width: 100%;
					text-align: left;
					padding: 0;
				}
				
				.item-input {
					width: 100%;
					padding: 15rpx 0 0 0;
				}
			}
		}
	}
	
	.submit-btn {
		position: fixed;
		left: 30rpx;
		right: 30rpx;
		bottom: 80rpx;
		height: 88rpx;
		z-index: 9;
		background-color: #E82E2E;
		border-radius: 16rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		color: #fff;
		font-size: 32rpx;
		font-weight: bold;
	}

	.estimate-popup {
		width: 580rpx;
		padding: 35rpx 40rpx;
		box-sizing: border-box;
		background-color: #fff;
		border-radius: 20rpx;
		
		.title {
			font-size: 30rpx;
			font-weight: bold;
			color: #333;
			padding-bottom: 22rpx;
		}
		.result {
			width: 100%;
			height: 400rpx;
			background-color: #f5f5f5;
			border-radius: 10rpx;
			display: flex;
			align-items: center;
			justify-content: space-around;
			flex-direction: column;
			
			.result-item {
				text-align: center;
				
				.price {
					
					.price-icon {
						font-size: 36rpx;
						line-height: 50rpx;
						color: #333;
						font-weight: 600;
					}
					
					.txt {
						font-size: 60rpx;
						line-height: 84rpx;
						color: #333;
						font-weight: 600;
					}
				}
				
				.txt {
					padding-top: 14rpx;
					font-size: 24rpx;
					font-weight: 500;
					color: #999;
				}
			}
		}
		
		.operation-list {
			padding-top: 44rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;
			
			.btn {
				height: 80rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				font-size: 30rpx;
				font-weight: bold;
				box-sizing: border-box;
				border-radius: 16rpx;
			}
			
			.again-btn {
				width: 200rpx;
				color: #333;
				border: 2rpx solid #333;
				background-color: #fff;
			}
			
			.complete-btn {
				width: 280rpx;
				background: linear-gradient(55deg, #E6201A 0%, #FF3023 100%);
				color: #fff;
			}
		}
	}
</style>
